input[type=range] {
	width:70%;
	height: 31px;
	display: inline-block;
	vertical-align: middle;

	-webkit-appearance: none;
	background: transparent; /* Otherwise white in Chrome */

	background: #DDD; /*#CDD1DA;*/
	border: 2px solid gray; border-radius: 20px;
}
input[type=range]:focus {
	outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}


/**
  * webkit
  */
input[type=range]::-webkit-slider-thumb {
	display: block; width: 30px; height: 25px; margin: 6px;
	background: #FFFFFF;
	position: absolute; top: 0; bottom: 0;
	border: 2px solid #03A9F4; border-radius: 20px;

	cursor: pointer;
	z-index: 20;
	-webkit-appearance: none;
	position: relative;
}


/**
  * moz
  */
input[type=range]::-moz-range-thumb {
	display: block; width: 30px; height: 25px; margin: 6px;
	background: #FFFFFF;
	position: absolute; top: 0; bottom: 0;
	border: 2px solid #03A9F4; border-radius: 20px;

	cursor: pointer;
	z-index: 20;
}


/**
  * ms
  */
input[type=range]::-ms-fill-lower {
	background: transparent;
}

input[type=range]::-ms-thumb {
	display: block; width: 30px; height: 25px; margin: 6px;
	background: #FFFFFF;
	position: absolute; top: 0; bottom: 0;
	border: 2px solid #03A9F4; border-radius: 20px;

	cursor: pointer;
	z-index: 20;
}

input[type=range]::-ms-track {
	/*width: 100%;*/
	cursor: pointer;

	/* Hides the slider so custom styles can be added */
	background: transparent; 
	border-color: transparent;
	color: transparent;
}
